<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="themes/default/header-nonebg::headerNoneBg(null,${keywords})"></div>
<link rel="stylesheet" th:href="@{/user/bootstrap/css/bootstrap.min.css}">
<style>
    .nav-underline .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
        font-size: .875rem;
        color: #6c757d;
    }

    .comments .comment {
        position: relative;
        background: 0 0;
        margin: .5em 0 0;
        padding: .5em 0 0;
        border: none;
        border-top: none;
        line-height: 1.2;
    }

    .comments .comment .comments {
        margin: -1.5em 0 -1em 1.25em;
        padding: 3em 0 2em 2.25em;
        box-shadow: -1px 0 0 rgba(34, 36, 38, .15);
    }

    .comments .comment .comments .comment {
        border: none;
        border-top: none;
        background: 0 0;
    }

    .comments .comment .avatar {
        display: block;
        width: 2.5em;
        height: auto;
        float: left;
        margin: .2em 0 0;
    }

    .comments .comment > .avatar ~ .content {
        margin-left: 3.5em;
    }

    .comments .comment .author {
        font-size: 1em;
        color: rgba(0, 0, 0, .87);
        font-weight: 700;
    }

    .m-teal {
        color: #00B5AD !important;
    }

    .comments .comment .metadata {
        display: inline-block;
        margin-left: .5em;
        color: rgba(0, 0, 0, .4);
        font-size: .875em;
    }

    .comments .comment .text {
        margin: .25em 0 .5em;
        font-size: 2em;
        word-wrap: break-word;
        color: rgba(0, 0, 0, .87);
        line-height: 1.3;
    }

    .comments .comment .actions {
        font-size: .875em;
    }

    .comments .comment .actions a {
        cursor: pointer;
        display: inline-block;
        margin: 0 .75em 0 0;
        color: rgba(0, 0, 0, .4);
    }
</style>
<body style="background: #f2f2f2;">
<div class="main-content index-page clearfix">
    <main role="main" class="container mt-3 p-3 bg-white rounded">
        <div class="row">
            <div class="col-md-12 blog-main">

                <div class="blog-post">
                    <h2 class="blog-post-title" th:text="${question.title}"></h2>
                    <p class="blog-post-meta">
                        <span th:text="${#dates.format(question.gmtUpdate,'yyyy-MM-dd')}"></span>
                        by
                        <a href="#" th:text="${question.authorName}"></a>
                        <span>
                        <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                             xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
<path fill-rule="evenodd"
      d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg>
                        [[${question.views}]]
                    </span>
                        <!-- 自己写的文章可以编辑和删除 -->
                        <a th:if="${session.loginUser.getUid()==question.authorId}"
                           class="float-right" style="color: red"
                           th:href="@{'/question/delete/'+${session.loginUser.getUid()}+'/'+${question.qid}}"
                           onclick="if(!confirm('你确认要删除吗？')) return false;">
                            <svg class="bi bi-x-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                      d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                                <path fill-rule="evenodd"
                                      d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>
                                <path fill-rule="evenodd"
                                      d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>
                            </svg>
                            删除
                        </a>
                        <a th:if="${session.loginUser.getUid()==question.authorId}"
                           class="float-right mr-3"
                           th:href="@{'/question/editor/'+${session.loginUser.getUid()}+'/'+${question.qid}}">
                            <svg class="bi bi-pencil-square" width="1em" height="1em" viewBox="0 0 16 16"
                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                                <path fill-rule="evenodd"
                                      d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                            </svg>
                            编辑
                        </a>
                    </p>
                </div>

                <hr style="margin-top: 18px">

                <!--文章主体内容-->
                <div id="doc-content">
                    <textarea th:text="${question.content}" style="display:none;"
                              placeholder="markdown"></textarea>
                </div>

            </div>

            <div class="col-md-12 blog-main" style="margin-top: 20px">
                <hr>
            </div>

            <div id="comment-form" class="col-md-12 blog-main" style="margin-top: 20px">
                <form th:action="@{'/question/comment/'+${question.qid}}" method="post">
                    <input type="hidden" name="parentComment.id" value="0">
                    <input type="hidden" name="parentUserName" value="">
                    <input type="hidden" name="userId" th:value="${session.loginUser.getUid()}">
                    <input type="hidden" name="userName" th:value="${session.loginUser.getUsername()}">
                    <input type="hidden" name="avatar" th:value="${session.loginUser.getAvatar()}">
                    <input type="hidden" name="questionId" th:value="${question.qid}">
                    <div class="form-group">
                        <textarea required name="content" class="form-control" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary float-right">提交评论</button>
                </form>
            </div>

            <div th:if="${commentList.size()!=0}" class="col-md-12 blog-main" style="margin-top: 20px">
                <div class="my-3 p-3 bg-white rounded shadow-sm comments" style="max-width: 100%;">
                    <h6 class="border-bottom border-gray pb-2 mb-0">评论列表</h6>

                    <div th:each="comment:${commentList}" class="comment">
                        <a class="avatar">
                            <img style="border-radius: 5px;margin-right: 5px;" th:src="@{${comment.avatar}}" width="32"
                                 height="32">
                        </a>
                        <div class="content">
                            <a class="author" >
                                <span th:text="${comment.userName}">小红</span>
                            </a>
                            <div class="metadata">
                                <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                            </div>
                            <div class="text" th:text="${comment.content}">
                                愿你走出半生，归来仍是少年！
                            </div>
                            <div class="actions">
                                <a class="reply" data-commentid="1" data-commentusername="Matt" th:attr="data-commentid=${comment.id},data-commentusername=${comment.userName}" onclick="reply(this)">回复</a>
                            </div>
                        </div>

                        <!--子集评论-->
                        <div style="display: block;" class="comments"
                             th:if="${#arrays.length(comment.replyComments)}>0">
                            <div class="comment" th:each="reply : ${comment.replyComments}">
                                <a class="avatar">
                                    <img style="border-radius: 5px;margin-right: 5px;" th:src="@{${reply.avatar}}"
                                         width="32" height="32">
                                </a>
                                <div class="content">
                                    <a class="author">
                                        <span th:text="${reply.userName}">小白</span>
                                        &nbsp;<span th:text="|@ ${reply.parentUserName}|" class="m-teal">@ 小红</span>
                                    </a>
                                    <div class="metadata">
                                        <span class="date"
                                              th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                    </div>
                                    <div class="text" th:text="${reply.content}">
                                        你也是！
                                    </div>
                                    <div class="actions">
                                        <a class="reply" data-commentid="1" data-commentusername="Matt"
                                           th:attr="data-commentid=${reply.id},data-commentusername=${reply.userName}"
                                           onclick="reply(this)">回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${commentList.size()==0}" class="col-md-12 blog-main" style="margin-top: 20px">
                <div class="my-3 p-3 bg-white rounded shadow-sm">
                    <h6 class="pb-2 mb-0 text-center">emmm... 这里暂时还没有评论....</h6>
                </div>
            </div>

        </div>
    </main>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script th:src="@{/user/bootstrap/js/bootstrap.bundle.min.js}"></script>

<link rel="stylesheet" th:href="@{/user/editormd/css/editormd.preview.css}"/>
<script th:src="@{/user/editormd/lib/marked.min.js}"></script>
<script th:src="@{/user/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/user/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/user/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/user/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/user/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/user/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/user/editormd/editormd.js}"></script>

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });
    });

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentusername = $(obj).data('commentusername');
        $("[name='content']").attr("placeholder", "@" + commentusername).focus();
        $("[name='parentComment.id']").val(commentId);
        $("[name='parentUserName']").val(commentusername);
        $(window).animate({scrollTop: $('#comment-form').offset().top}, 2000, 'swing');

        // $(window).scrollTo($('#comment-form'), 2000);
    }
</script>
</body>
</html>